<template>
<div class="wirteInformation">
   <div class="scroll">
    <size></size>
    <Form></Form>
   </div>
     <div class="footer" v-show="priceShow">
       <div class="footer_position">
         <div class="footer_price">
           <span :class="acitv">￥{{price.total*number}}</span><span class="showprice">{{price.total}}/件x 1</span>
           <span class="footer_price_detail">T恤{{price.clothes_price*number}}元+正面{{price.up_price*number}}元+背面{{price.down_price*number}}元</span>
         </div>
         <div class="footer_buyBtn" @click='buy'>{{buyText}}</div>
       </div>
    </div>
</div>
</template>
<script>
import size from './compon/informationTitle.vue'
import Form from './compon/informationForm.vue'
export default {
  name: 'wirteInformation',
  data () {
    return {
      sizeTotal:[],
      buyText:'',
      acitv:{
        active:false,
        footer_price_money:true
      }
    }
  },
  methods:{
    startJsApiPay(order_num) {
      var _this=this;
     this.$http.post('http://zoomyoung.cn/api/payment/payByWechatJsApi',{order_num:order_num},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          _this.$nextTick(function(){
            _this.WXPayment(res.data.data,order_num)
          })
      }).catch(function(err){  
          console.log(err)  
    });
   },
   WXPayment(configJSON,orderNum) {
     var _this=this;
     if (typeof WeixinJSBridge === 'undefined') {
         alert('请用手机端打开')
         return false;
     }
     WeixinJSBridge.invoke('getBrandWCPayRequest', configJSON, function (res) {
         switch (res.err_msg) {
             case 'get_brand_wcpay_request:cancel':
                 alert('用户取消支付！');
                 break;
             case 'get_brand_wcpay_request:fail':
                 alert('支付失败！（' + res.err_desc + '）');
                 break;
             case 'get_brand_wcpay_request:ok':
                  _this.check(orderNum);
                 break;
             default:
                 alert(JSON.stringify(res));
                 break;
         }
     });
 },
 check(orderNum) {
         var _this=this;
        this.$http.post('http://zoomyoung.cn/api/payment/checkPayResult',{order_num:orderNum},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          if(res.data.data.message != 'no_pay'){
            console.log('ad')
             _this.$router.push({name:"finish",query:{code:_this.$route.query.code}}); 
          }else{
            alert('支付失败!')
          }
      }).catch(function(err){  
          console.log(err)  
      });
    },
    buy(){     //点击购买按钮
      var _this=this;
    	var tag=4;
        _this.errorShow.nameError=false;
        _this.errorShow.areaError=false;
        _this.errorShow.telError=false;
       for(var i in this.$store.state.information)
       {
       	if(_this.$store.state.information[i]=="")  //用于判断用户是否填写完信息
       	{
       		switch(i)
          {
          case 'name' :_this.errorShow.nameError=true ;break;
          case 'tel' :_this.errorShow.telError=true ;break;
          case 'city' :_this.errorShow.areaError=true ;break;
          case 'area' :_this.errorShow.areaError=true ;break;
          }
          tag--;
       	}
      }
       _this.$store.dispatch("setErrorShow",_this.errorShow);
        if(tag==4)
        {
           _this.$http.post('http://zoomyoung.cn/api/design/build-order',{   //用于获取客户填写的信息以及购买衣服的size
               code:_this.$route.query.code,
               sex:'男',
               address_area:_this.informationDetail.location,
               address_info:_this.informationDetail.area,
               phone:_this.informationDetail.tel,
               consignee:_this.informationDetail.name,
               size:_this.size
           }).then(function(res){
               //这里需要完成支付功能
               if(_this.is_action==1)
               {
                _this.$router.push({name:"finish",query:{code:_this.$route.query.code}});
               }else{
                _this.startJsApiPay(res.data.data.order_num)
               }
               
               // 
           }).catch(function(err){
              console.log(err)
           })     
        }
    },
  },
  mounted(){
    var localData = window.localStorage.getItem('price')
    var _this=this;
    var route_path=this.$route.query.code;
    console.log(this.$route.query.code)
    this.$http.get('http://zoomyoung.cn/api/auth/get-userinfo',{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){  
      if(res.data.message=='no_login')
      {
          var redirUrl = encodeURIComponent("http://design2.zoomyoung.cn?path=information&code="+route_path);
        console.log("http://zoomyoung.cn/api/auth/wechat-login?callback="+redirUrl);
        window.location.href="http://zoomyoung.cn/api/auth/wechat-login?callback="+redirUrl;
      }
      if(_this.is_action==1)    //这里是判断是否在活动期内
      {
       _this.buyText="免费获取";
       _this.acitv.active=true;
      }else{
        _this.buyText="立即购买";
        _this.acitv.active=false;
      }
      }).catch(function(err){  
         console.log(err)  
      }) 
  },
  components:{size,Form},
  computed:{
    number(){
      return this.$store.state.number;       //获取store里面得number
    },
    //衣服的价格显示
    price(){
      let localData = window.localStorage.getItem('price')     //获取localStroage里面的值
      this.$store.commit('getPrice',JSON.parse(localData))//同步操作   
      return this.$store.state.price
    },
    //衣服对象的尺寸
    size(){     
      return this.$store.state.size;
    },
    //获取用户的基本信息
    informationDetail(){
      return this.$store.state.information
    },
    //获取用户的填写信息框的状态
    errorShow(){
      return this.$store.state.errorShow
    },
    //获取价格展示框的状态
    priceShow(){
      return this.$store.state.priceShow
    },
    //获取活动状态
    is_action(){
      return window.localStorage.getItem('is_action')
    }
  }

}
</script>
<style scoped>
.wirteInformation{background: #313237;}
.scroll{width: 100%;overflow-y: scroll;padding-bottom: 230px}
.footer{width: 100%;height: 200px;background: #FAFAFA;min-width: 320px;z-index: 99;position: fixed;left: 0;bottom: 0}
.footer_position{width: 100%;height: 100%;position: relative;}
.footer_price{width: 46.9%;height: 120px;position: absolute;left: 4%;top: 50%;margin-top: -60px}
.footer_buyBtn{width: 42%;height: 88px;position: absolute;left: 54.3%;top: 50%;margin-top:-44px;text-align: center;line-height: 88px;background-image: linear-gradient(-132deg, #E716C4 0%, #7403FF 100%);border-radius: 8px;font-size:36px}
.footer_price_money{width: 50%;height: 90px;line-height: 90px;display: block;font-family: PingFangSC-Medium;font-size: 64px;color: #D213CF;letter-spacing: -0.05px;float: left;}
.showprice{width:40% ;display: block;float: left;height: 40px;line-height: 40px;font-size: 20px;padding-top: 25px;margin-left: 20px}
.active{text-decoration: line-through;}
.footer_price_detail{width: 100%;height: 25px;line-height: 25px;font-family: PingFangSC-Regular;font-size: 20px;color: #4A4A4A;letter-spacing: -0.04px;display: block;float: left;}
</style>
